<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1322088_73rt4zfvsco.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css" />
	</head>
	<style type="text/css">
		.dutault-nav .heard-left .col-md-4:nth-child(2) {
			width: 30%;
		}

		.dutault-nav .col-md-4 {
			justify-content: flex-start;
		}

		.nav-tab-box {
			width: 7%;
		}

		.chatbox {
			position: fixed;
			top: 0;
			bottom: 0;
			width: 100%;
			background-color: rgba(85, 85, 85, .7);
			z-index: 99;
		}

		.chatbox .chat-box {
			width: 99%;
			padding: 30px 50px;
			min-height: 300px;
			background-color: #fff;
		}

		.chatbox .chat-box .mantop {
			font-size: 18px;
			margin-bottom: 10px;
		}

		.manbtn {
			margin-top: 20px;
		}

		.manbtn button {
			width: 10%;
			height: 35px;
			line-height: 35px;
			margin-right: 15px;
			background-color: #fff;
			border-radius: 4px;
			border: 1px solid #ccc;
		}

		.manbtn button:nth-child(2) {
			background-color: #13C19F;
			border: 0;
			color: #fff;
		}

		.mancon {
			max-height: 400px;
			overflow-y: auto;
		}
		
		.manfujian{
			margin-top: 20px;
		}
		
		#testList:hover{
			color: #13C19F;
			cursor: pointer;
		}
		
		.manpinlun ul li{
			padding: 10px 0;
			border-bottom: 1px solid #ccc;
		}
		
		.manpinlun ul li .col-md-1{
			text-align: right;
		}
		
		.manpinlun ul li img{
			width: 40px;
			height: 40px;
			border-radius: 50%;
		}
		
		.manpinlun ul li .col-md-11{
			padding-top: 10px;
		}
		
		.mar10{
			margin-right: 10px;
		}
		
		.manpinlun ul li .col-md-11 textarea{
			width: 100%;
			border: 0;
			background-color: #F8F9FD;
		}
	</style>
	<body>
		<div class="container-fluid bg-white">
			<!-- 订单列表 -->
			<div class="order order-box">
				<div class="ood-box">
					<!-- 顶部工具条 -->
					<nav class="flex">
						<!-- 默认显示的操作栏 -->
						<div class="dutault-nav width100 flex">
							<div class="heard-left width100 flex">
								<div class="col-md-2 nav-tab-box padding-0">
									<div class="sle-box"><span class="changeSelectData">全部(3)</span><i class="iconfont icon-xiangxia"></i></div>
									<div onclick="closeMain()" class="show-sle-box">
										<div class="show-sle">
											<ul class="mp00">
												<li class="list-none">全部(3)</li>
												<li class="list-none">已回复(3)</li>
												<li class="list-none">未已回复(0)</li>
											</ul>
										</div>
									</div>
								</div>
								<div class="col-md-4 flex"><i class="iconfont icon-riqi"></i><input type="text" class="layui-input" id="test10"
									 placeholder=" - "></div>
								<div class="col-md-4 padding-0 flex">
									<i class="iconfont icon-search"></i>
									<input type="text" class="layui-input secrh" placeholder="请输入订单号/经销商名称" value="" />
									<!-- <span class="gjss" title="点击进行高级搜索">高级搜索</span> -->
								</div>
							</div>

						</div>
						<!-- 选择订单后显示操作栏 -->
						<div class="caozuo-nav hidden flex">
							<div class="nav-item"><i class="iconfont icon-guanbi hidden"></i>已选择<span class="changeNum">5</span>项</div>
							<div class="nav-item"><i class="iconfont icon-dingdanshenhe"></i>订单审核</div>
							<div class="nav-item"><i class="iconfont icon-financial-management"></i>财务审核</div>
							<div class="nav-item"><i class="iconfont icon-chuku"></i>出库审核</div>
							<div class="nav-item"><i class="iconfont icon-fahuo"></i>发货确认</div>
							<div class="nav-item"><i class="iconfont icon-dayin"></i>打印</div>
							<div class="nav-item"><i class="iconfont icon-daochu"></i>导出</div>
							<div class="nav-item"><i class="iconfont icon-delete"></i>批量删除</div>
						</div>
					</nav>
					<!-- 数据列表 -->
					<div class="order-list">
						<table id="order-list" lay-filter="test"></table>
					</div>
				</div>
			</div>

			<div class="chatbox hidden">
				<div class="chat-box">
					<div class="mantop">回复<span>没钱花</span>中</div>
					<div class="mancon">
						<div class="manpinlun">
							<ul>
								<li>
									<div class="flex">
										<div class="col-md-1"><img src="img/001.png" ></div>
										<div class="col-md-11">
											<div><span class="mar10">没钱</span><span class="mar10">2019-10-10 10:10:10</span><span class="mar10 iconfont icon-delete"></span></div>
											<div style="margin-top: 10px;">没钱没钱没钱没钱没钱没钱没钱没钱</div>
										</div>
									</div>
								</li>
							</ul>
							<ul id="ul" style="padding-left: 20px;">
								<!-- <li>
									<div class="flex">
										<div class="col-md-1"><img src="img/002.png" ></div>
										<div class="col-md-11">
											<div><span class="mar10">没钱</span><span class="mar10">2019-10-10 10:10:10</span><span class="mar10 iconfont icon-delete"></span></div>
											<div style="margin-top: 10px;">{{context}}</div>
										</div>
									</div>
								</li> -->
							</ul>
							
							<!-- 输入回复内容区 -->
							<div style="background-color: #F8F9FD;padding: 20px;">
								<ul>
									<li>
										<div class="flex">
											<div class="col-md-1"><img src="img/002.png" ></div>
											<div class="col-md-11">
												<textarea rows="5" cols="" placeholder="请输入回复内容"></textarea>
											</div>
										</div>
									</li>
								</ul>
								<div class="manfujian">
									<div class="layui-upload">
										<div id="testList" class="iconfont icon-iconfontfujian">添加附件（附件最大10M，支持格式：JPG.PNG）</div>
										<div class="layui-upload-list">
											<table class="layui-table">
												<thead>
													<tr>
														<th>文件名</th>
														<th>大小</th>
														<th>操作</th>
													</tr>
												</thead>
												<tbody id="demoList"></tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
						</div>	
					</div>
					<div class="manbtn flex">
						<button id="quxiao" type="button">取消</button>
						<button id="send" type="button">发送</button>
					</div>
				</div>
			</div>
		</div>
		
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-success layui-btn-xs" lay-event="anwser">继续回复</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		<script src="js/jquery-v3-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Gather.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				var height = document.documentElement.clientHeight;
				$(".container-fluid").css({
					"height": (height - 34) + "px"
				})
			})

			$(window).resize(function() {
				var height = document.documentElement.clientHeight;
				$(".container-fluid").css({
					"height": (height - 67) + "px"
				})
			})

			$(".nav-tab-box .sle-box").click(function() {
				$(this).next().slideToggle(100)
			})

			function closeMain() {
				$(".nav-tab-box .show-sle-box").slideToggle(100)
			}

			$(".nav-tab-box .show-sle-box .list-none").click(function() {
				$(".sle-box .changeSelectData").text($(this).text())
			})

			function showTabMain(num) {
				if (num > 0) {
					$(".flex .dutault-nav").addClass("hidden")
					$(".flex .caozuo-nav").removeClass("hidden")
				} else {
					$(".flex .dutault-nav").removeClass("hidden")
					$(".flex .caozuo-nav").addClass("hidden")
				}
				$(".changeNum").text(num)
			}

			layui.use(['form', 'table', 'laydate', 'element'], function() {
				var table = layui.table,
					laydate = layui.laydate,
					form = layui.form,
					element = layui.element

				//时间范围选择
				laydate.render({
					elem: '#test10',
					type: 'datetime',
					range: true,
					value: Gather.getTime().YearText + " - " + Gather.getTime().YearText,
					format: "yyyy-MM-dd HH:mm",
					max: Gather.getTime().value,
					done: function(value, date, endDate) {
						console.log(value); //得到日期生成的值，如：2017-08-18
						console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
						console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
					}
				});

				//获取列表选中行
				table.on('checkbox()', function(obj) {
					var data = table.checkStatus('order-list').data.length;
					showTabMain(data)
				});

				// 数据列表渲染
				table.render({
					elem: '#order-list',
					data: DataArray2, // data为数据库查到的数据
					height: 500,
					cols: [
						[ //以下field字段为为数据库相同,title为字段描述
						// {type:'checkbox'}
						{field: 'logintime',event: 'openView',width: 250,title: '经销商名称',}, 
						{field: 'loginip',event: 'showModel',width: 450,title: '反馈内容',}, 
						{field: 'checkmail',width: 250,title: '日期',},
						{field:'checkmail', fixed: 'right',width:180, title: '操作', toolbar: '#barDemo',}
						]
					],
					page: true
				});
				//单元格点击操作
				table.on('tool(test)', function(obj) {
					if (obj.event == 'openView') {
						window.open('jxsadd.html', '_self');
					}else if (obj.event == 'showModel') {
						$('.chatbox').removeClass('hidden')
					}else if (obj.event == 'anwser') {
						$('.chatbox').removeClass('hidden')
					}else if (obj.event == 'del') {
						layer.confirm('确定删除?',function(index){
							obj.del();
							layer.close(index);
						})
					}
				});
			})
			
			//隐藏对话框
			$('#quxiao').click(function(){
				$('.chatbox').addClass('hidden')
			})
			
			//发送
			$('#send').click(function(obj){
				var context = $('textarea')
				if(context.val() !=""){
					var html = '<li>'+
									'<div class="flex">'+
										'<div class="col-md-1"><img src="img/002.png" ></div>'+
										'<div class="col-md-11">'+
											'<div><span class="mar10">没钱</span><span class="mar10">'+ getNewTime() +'</span><span class="mar10 del iconfont icon-delete"></span></div>'+
											'<div style="margin-top: 10px;">'+context.val()+'</div>'+
										'</div>'+
									'</div>'+
								'</li>';
					$('#ul').prepend(html);
					$('textarea').val('');
					$('.del').on("click",function(){
						$(this).parents('li').remove()
					})
				}else{
					layer.open({
						content: '回复内容不能为空'
					});     
				}
			})
			//获取回复时间日期
			function getNewTime() {
				var dataTime = new Date();
				var year = dataTime.getFullYear();
				year = year > 9 ? year : "0" + year;
				var month = dataTime.getMonth() + 1;
				month = month > 9 ? month : "0" + month;
				var day = dataTime.getDate();
				day = day > 9 ? day : "0" + day;
				var hour = dataTime.getHours();
				hour = hour > 9 ? hour : "0" + hour;
				var miunte = dataTime.getMinutes();
				miunte = miunte > 9 ? miunte : "0" + miunte;
				var Seconds = dataTime.getSeconds();
				Seconds = Seconds > 9 ? Seconds : "0" + Seconds;
				
				console.log(month + "-" + day + " " + hour + ":" + miunte);

				return year + "-" + month + "-" + day + " " + hour + ":" + miunte + ":" +Seconds
			}
			
			layui.use('upload', function() {
				var $ = layui.jquery,
				upload = layui.upload;
				//多文件列表示例
				var demoListView = $('#demoList'),
					uploadListIns = upload.render({
						elem: '#testList',
						url: '/upload/',
						accept: 'file',
						multiple: true,
						auto: false,
						// bindAction: '#testListAction',
						choose: function(obj) {
							var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
							//读取本地文件
							obj.preview(function(index, file, result) {
								var tr = $(['<tr id="upload-' + index + '">', '<td>' + file.name + '</td>', '<td>' + (file.size / 1014).toFixed(
										1) + 'kb</td>', '<td>',
									'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>', '</td>', '</tr>'
								].join(''));

								//单个重传
								tr.find('.demo-reload').on('click', function() {
									obj.upload(index, file);
								});

								//删除
								tr.find('.demo-delete').on('click', function() {
									delete files[index]; //删除对应的文件
									tr.remove();
									uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
								});

								demoListView.append(tr);
							});
						},
						done: function(res, index, upload) {
							if (res.code == 0) { //上传成功
								var tr = demoListView.find('tr#upload-' + index),
									tds = tr.children();
								tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
								tds.eq(3).html(''); //清空操作
								return delete this.files[index]; //删除文件队列已经上传成功的文件
							}
							this.error(index, upload);
						},
						error: function(index, upload) {
							var tr = demoListView.find('tr#upload-' + index),
								tds = tr.children();
							tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
							tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
						}
					});
				})
		</script>
	</body>
</html>
